<template>
  <div v-if="quantity" class="digital-print-display">
    <div class="info-summary">
      <div class="quote-title">
        <span class="label">报价{{ quoteNumber }}：</span>
        <span class="value">现货数码印</span>
      </div>
      <div class="price-info">
        <div class="quantity-info">
          <span class="label">数量：</span>
          <span class="value">{{ quantity }}{{ quantityUnit }}</span>
        </div>
      </div>
    </div>

    <!-- 价格信息卡片 -->
    <div class="price-cards">
      <div class="price-card retail-card">
        <div class="card-header">
          <span class="price-type">零售价</span>
        </div>
        <div class="price-content">
          <div class="unit-price">
            <span class="label">单价：</span>
            <span class="value">¥{{ retailUnitPrice.toFixed(4) }}/{{ quantityUnit }}</span>
          </div>
          <div class="total-price">
            <span class="label">总价：</span>
            <span class="value">¥{{ retailTotalPrice.toFixed(2) }}</span>
          </div>
        </div>
      </div>

      <div class="price-card member-card">
        <div class="card-header">
          <span class="price-type">会员价</span>
        </div>
        <div class="price-content">
          <div class="unit-price">
            <span class="label">单价：</span>
            <span class="value">¥{{ memberUnitPrice.toFixed(4) }}/{{ quantityUnit }}</span>
          </div>
          <div class="total-price">
            <span class="label">总价：</span>
            <span class="value">¥{{ memberTotalPrice.toFixed(2) }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
defineOptions({
  name: "DigitalPrintDisplay",
  inheritAttrs: false,
});

defineProps({
  formData: {
    type: Object,
    required: true,
  },
  quantity: {
    type: Number,
    default: 0,
  },
  quoteNumber: {
    type: [String, Number],
    default: 1,
  },
  submitPrice: {
    type: Number,
    default: 0,
  },
  finalPrice: {
    type: Number,
    default: 0,
  },

  memberUnitPrice: {
    type: Number,
    default: 0,
  },
  retailUnitPrice: {
    type: Number,
    default: 0,
  },
  memberTotalPrice: {
    type: Number,
    default: 0,
  },
  retailTotalPrice: {
    type: Number,
    default: 0,
  },
  quantityUnit: {
    type: String,
    default: "个",
  },
});
</script>

<style scoped lang="scss">
.digital-print-display {
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  padding: 12px;
  background-color: #f8f9fa;
  width: 100%;

  .info-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding: 8px 12px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

    .quote-title,
    .price-info {
      display: flex;
      align-items: center;

      .label {
        font-weight: 500;
        color: #606266;
        margin-right: 8px;
      }

      .value {
        font-size: 16px;
        font-weight: 600;
        color: #409eff;
      }
    }

    .price-info {
      .final-price,
      .submit-price,
      .quantity-info {
        display: flex;
        align-items: center;

        .label {
          font-weight: 500;
          color: #606266;
          margin-right: 8px;
        }

        .value {
          font-size: 16px;
          font-weight: 600;
        }
      }

      .final-price .value {
        color: #67c23a; // 绿色表示最终价
      }

      .submit-price .value {
        color: #e6a23c; // 橙色表示总价
      }

      .quantity-info .value {
        color: #409eff; // 蓝色表示数量
      }
    }
  }

  .price-cards {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;

    .price-card {
      flex: 1;
      border: 1px solid #e4e7ed;
      border-radius: 6px;
      overflow: hidden;
      background-color: #fff;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

      .card-header {
        padding: 8px 12px;
        font-weight: 600;
        font-size: 14px;
        text-align: center;
        color: #fff;
      }

      .price-content {
        padding: 12px;

        .unit-price,
        .total-price {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 6px;

          &:last-child {
            margin-bottom: 0;
          }

          .label {
            font-weight: 500;
            color: #606266;
          }

          .value {
            font-size: 14px;
            font-weight: 600;
            color: #303133;
          }
        }

        .total-price .value {
          font-size: 16px;
          font-weight: 700;
        }
      }

      &.retail-card .card-header {
        background-color: #e6a23c;
      }

      &.member-card .card-header {
        background-color: #67c23a;
      }
    }
  }
}

// 空状态样式
.digital-print-display:empty::before {
  content: "暂无数据";
  display: block;
  text-align: center;
  color: #c0c4cc;
  font-size: 14px;
  padding: 20px;
}
</style>
